import React,{useEffect,useState} from 'react'
import './toplogin.css'
import type { FormProps,PopconfirmProps } from 'antd';
import { Button, Checkbox, Form, Input,Modal,message, Popconfirm } from 'antd';



import { useNavigate } from 'react-router-dom';
import {getlogin} from '../../request/index'
type FieldType = {
  username?: string;
  password?: string;
  remember?: string;
};



const toplogin: React.FC = () => {
 const [isModalOpen, setIsModalOpen] = useState(false);
  const [setIble, setisIble] = useState(false);
  const [form] = Form.useForm();
  const navigate = useNavigate();
// 弹窗的

 let token=localStorage.getItem('token')

// 登录打开弹窗的
const gologin=()=>{
  setIsModalOpen(true);
    if(token){
      setIsModalOpen(false);
    }
  
}



  const handleOk = () => {
      setIsModalOpen(false)
    form.submit()
  
  };


  const handleCancel = () => {
         setIsModalOpen(false)
  };


    const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
  console.log('Success:', values);
    getlogin(values).then(res=>{
    console.log('登录',res);
   
    if(res.data.code=='200'){
      navigate('/home/index');
          message.success('登录成功');
        localStorage.setItem('token',res.data.token)
        localStorage.setItem('msg',res.data.msg)
        localStorage.setItem('name',res.data.name)
        localStorage.setItem('img',res.data.img)
    }
    
  })


};

// 鼠标移入移出
  const handlesMouseEnter = () => {
    setisIble(true);

  }
  const handlesMouseLeave = () => {
    setisIble(false)

  };


// 二次确认弹窗
const confirm: PopconfirmProps['onConfirm'] = () => {

  message.success('退出成功');

  localStorage.removeItem('token')
  localStorage.removeItem('name')
  localStorage.removeItem('img')
      navigate('/home/index')
};

const cancel: PopconfirmProps['onCancel'] = (e) => {
  console.log(e);
  message.error('Click on No');
};


// 点击跳转到工作台页面
const gostaging=()=>{
   message.success('即将跳转到控制台页面');
   setTimeout(() => {
      navigate('/staging')
   }, 2000);

}
// 点击跳转到订单页面
const goorderof=()=>{
    message.success('即将跳转页面');
   setTimeout(() => {
      navigate('/orderof')
   }, 2000);
}


  return (
    <div className='bbasc'>
      {
        localStorage.getItem('token')
        ? 
           <div className='cdd'  onMouseEnter={handlesMouseEnter} >
         <img src={localStorage.getItem('img')} alt="" />
            <span onClick={gologin}>{localStorage.getItem('name')}</span>
      </div>
      :
         <div className='cdd'>
         <img src='../src/assets/img/admin.png' alt="" />
            <span onClick={gologin}>登录/注册</span>
      </div>
      }
       
                {/* 弹窗 */}
                    <Modal  open={isModalOpen} onOk={handleOk} onCancel={handleCancel} okText='登录' cancelText='取消'>
 
      
        <div className='log'>
            <img src="https://s.ibaotu.com/next/img/new/components/login/img_alert_logo.4a5d.png" alt="" />
           
        </div>
       


        <div className='bomlogin'>
             <Form
    name="basic"
    labelCol={{ span: 8 }}
    wrapperCol={{ span: 16 }}
    style={{ maxWidth: 600 }}
    initialValues={{ remember: true }}
    onFinish={onFinish}
    autoComplete="off"
     form={form}
  >
    <Form.Item<FieldType>
      label="手机号"
      name="username"
      rules={[
          {
            validator: (_, value) => {
              if (/^1\d{10}$/.test(value)) {
                return Promise.resolve(true)
              }
              return Promise.reject(new Error('请输入正确的手机号码'))
            },
          },
        ]}
    >
      <Input style={{width:'300px'}}/>
    </Form.Item>

    <Form.Item<FieldType>
      label="验证码"
      name="password"
      rules={[{ pattern: /^\d{6}$/, message: '请输入6位数字' }]}
      
    >
      <Input  style={{width:'100px'}}/>
    </Form.Item>
            <Form.Item<FieldType>
      name="remember"
      valuePropName="checked"
      wrapperCol={{ offset: 8, span: 16 }}
    >
      <Checkbox>记住用户</Checkbox>
    </Form.Item>



  </Form>

        </div>

    </Modal>


        {
          setIble ?     <div className='outlogin' onMouseLeave={handlesMouseLeave}>
        <div className='outlogin_header'>
          <p className='imgg'>
               <img src={localStorage.getItem('img')} alt="" />
          <span>{localStorage.getItem('name')}</span>
          </p>
            <p><button className='consoles' onClick={gostaging}>控制台</button></p>
            <p className='onlypoeple' onClick={goorderof}>订单/发票</p>
        </div>
        <div className='outlogin_body'>
          <img src="../src/assets/img/620.png" alt="" style={{width:'100%',height:'100%'}}/>
        </div>
          <div className='outlogin_bom'>
     
              <Popconfirm
    title="确认退出"
    description="你确认要退出吗?"
    onConfirm={confirm}
    onCancel={cancel}
    okText="是"
    cancelText="否"
  >
    
            <button className='btnout'>退出登录</button>
            </Popconfirm>
          </div>
    </div> :''
        }

    </div>
  )
}

export default toplogin










